<!--
 * @Author: your name
 * @Date: 2020-09-21 10:20:08
 * @LastEditTime: 2020-09-30 15:40:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \im.xuanma.cnd:\study\study2\vue-admin-template\src\views\dashboard\index.vue
-->
<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div>
    <div class="dashboard-text">
      roles: <span v-for="role in roles" :key="role">{{ role }}</span>
    </div> -->
    <!--头部信息统计-->
    <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="6" style="margin-bottom: 20px" >
        <el-card >
          <div class="top">
            <div class="top-icon-box" @click="pgh">
              <i class="el-icon-s-custom top-icon"></i>
            </div>
            <div style="margin-left: 35px">
              <p class="top-pp">年营业额</p>
              <p class="top-ppp">321,369</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" style="margin-bottom: 20px">
        <el-card>
          <div class="top">
            <div class="top-icon-box">
              <i class="el-icon-s-custom top-icon"></i>
            </div>
            <div style="margin-left: 35px">
              <p class="top-pp">月营业额</p>
              <p class="top-ppp">321,369</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" style="margin-bottom: 20px">
        <el-card>
          <div class="top">
            <div class="top-icon-box">
              <i class="el-icon-s-custom top-icon"></i>
            </div>
            <div style="margin-left: 35px">
              <p class="top-pp">累计入住人数</p>
              <p class="top-ppp">321,369</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" style="margin-bottom: 20px">
        <el-card>
          <div class="top">
            <div class="top-icon-box">
              <i class="el-icon-s-custom top-icon"></i>
            </div>
            <div style="margin-left: 35px">
              <p class="top-pp">今日入住人数</p>
              <p class="top-ppp">321,369</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--可视化图表-->
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <el-card style="margin-bottom: 20px">
      <div id="main" :style="{ width: '100%', height: '300px' }"></div>
    </el-card>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <el-card style="width: 100%">
          <div id="main2" :style="{ width: '100%', height: '300px' }"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <el-card style="width: 100%">
          <div id="main3" :style="{ width: '100%', height: '300px' }"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
var echarts = require("echarts");
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "roles"]),
  },
  data() {
    return {
      //月统计
      arr:[120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 210, 98]
      
    }
     
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    pgh(){
     
      this.arr=[120, 132, 101, 134, 90, 230, 210, 210, 110, 290, 20, 98]
       console.log(this.arr)
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      var myChart2 = this.$echarts.init(document.getElementById("main2"));
      var myChart3 = this.$echarts.init(document.getElementById("main3"));
      // 折线图

      myChart.setOption({
        title: {
          text: "月统计",
        },
        //鼠标经过提示框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#008ACD",
            },
          },
        },
        //头部说明
        legend: {
          data: ["入住人数"],
        },
        //工具下载
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        //网格
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false, //是否显示边界
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            axisLabel: {
              color: "#008ACD", //刻度线标签颜色
            },
            axisLine: {
              lineStyle: {
                color: "#008ACD", //线条颜色
                width: 1,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#008ACD", //线条颜色
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: "入住人数",
            type: "line",
            stack: "总量",
            //线条面积
            areaStyle: {
              color: "#C8B2F4",
            },
            data: this.arr,
            color: "#2C65E0",
          },
        ],
      });

      //饼图
      myChart2.setOption({
        // backgroundColor: "#2c343c",

        title: {
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        legend: {
          left: "center",
          top: "bottom",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问", color: "#6AD1D3" },
              { value: 310, name: "邮件营销" },
              { value: 274, name: "联盟广告" },
              { value: 235, name: "视频广告" },
              { value: 400, name: "搜索引擎" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              // color: "rgba(255, 255, 255, 0.3)",
            },
            labelLine: {
              lineStyle: {
                // color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            // itemStyle: {
            //   color: "#c23531",
            //   shadowBlur: 200,
            //   shadowColor: "rgba(0, 0, 0, 0.5)",
            // },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      });
      // 柱状图
      myChart3.setOption({
        color: ["#50D6D9"],
        title: {
          text: "周统计",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#008ACD", //线条颜色
                width: 1,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#008ACD", //线条颜色
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: "入住人数",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      });
      //自动大小
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
          myChart2.resize();
          myChart3.resize();
        };
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  height: 72px;
  justify-content: space-between;
  &-pp {
    font-size: 24px;
    color: #8c8c8c;
    margin-bottom: 0px;
  }
  &-ppp {
    font-size: 20px;
    color: #666666;
    font-weight: 700;
    margin-top: 12px;
  }
  &-icon-box {
    width: 80px;
    height: 70px;
    // background: chocolate;
    border-radius: 8%;
    margin-left: 10px;
  }
  &-icon-box:hover {
    background: rgb(30, 210, 105);
  }
  &-icon {
    color: rgb(44, 101, 224);
    font-size: 3em;
    margin: 10px 10px 8px 16px;
  }
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
